<template>
  <view>
    <view v-if="listData.length > 0">
      <view class="cu-card-wrap" v-for="(item, index) in listData" :key="index">
        <view class="header-wrap">
          <view class="title-wrap">
            <text class="title">{{ item.alarmCode }}</text>
          </view>
        </view>
        <view class="affix">
          <image-upload state="view" :imageUrl="item.image" size="small"></image-upload>
        </view>
        <view class="body-wrap">
          <view class="content-wrap">
            <view class="label">摄像机名称：</view>
            <view class="value">{{ item.cameraName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">分类：</view>
            <view class="value">{{ item.alarmClassify }}</view>
          </view>
        </view>
        <view class="footer-wrap">
          <view class="button-wrap button-wrap-todo">
            <view class="button-wrap-left">
              {{ item.alarmTime }}
            </view>
            <view class="flex">
              <view class="button" @click="deal(item)">处理</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <Empty></Empty>
    </view>
  </view>
</template>

<script>
import { getAiAlarmList } from '@/api/ai-alarm'
import Empty from '@/components/cu-empty/index.vue'
import ImageUpload from '@/components/image-upload/index.vue'
import { mapGetters } from 'vuex'

export default {
  components: {
    Empty,
    ImageUpload
  },
  data() {
    return {
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      isFinished: false
    }
  },
  computed: {
    ...mapGetters(['staffId'])
  },
  onLoad() {
    // 重新加载页面数据 data 为 true ,触发方式 uni.$emit('reload',true)
    uni.$on('reload', (data) => {
      if (data) {
        this.initData()
      }
    })
  },
  onShow() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getList()
  },
  methods: {
    initData() {
      this.listData = []
      this.isFinished = false
      this.pageNum = 1
      this.pageSize = 10
      this.total = null
      this.getList()
    },
    getList() {
      if (this.isFinished) {
        return
      }
      const data = {
        status: '0',
        planDealUserId: this.staffId,
        pageSize: 10,
        pageNum: this.pageNum
      }
      if (!this.total || this.total > this.listData.length) {
        getAiAlarmList(data)
          .then((res) => {
            if (this.pageNum === 1) {
              this.listData = res.rows
            } else {
              this.listData.push(...res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    },
    deal({ id }) {
      let url = `/pages/alarm/ai-alarm/deal?id=${id}`
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.button-wrap-todo {
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .button-wrap-left {
    display: flex;
    align-items: center;

    > view {
      margin-right: 16rpx;
      margin-left: 0;
    }
  }
}

.affix {
  position: absolute;
  top: 0;
  right: 10rpx;
}

.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  margin-bottom: 24rpx;
  position: relative;

  &:first-child {
    margin-top: 24rpx;
  }
}
</style>
